<template>
  <el-form :model="form7" label-width="auto" style="max-width: 1300px;min-width: 1300px">
    <div class="common-layout">
      <el-container>
        <el-main>
          <!--吊装-->
          <el-row class="report-header">
            <el-col :span="4" class="text_is_on_the_left" style="border: none">
              <div class="grid-content ep-bg-purple"/>
              <span class="the_font_is_bold" style="font-size: 25px">吊装:</span>
            </el-col>
          </el-row>
          <!--Case-->
          <el-row>
            <el-col :span="2" style="padding-left: 10px;">
              <div class="grid-content ep-bg-purple"/>
              <span class="fontSize the_font_is_bold">Case</span>
            </el-col>
            <el-col :span="22">
              <span>{{form7.input_Case}}</span>
            </el-col>
          </el-row>
          <!--内容-->
          <el-row>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>上泵是否与下泵连接牢固</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <el-radio-group v-model="form7.radio_1">
                <el-radio value="是" size="large" class="smallOptions"><span style="font-size: 15px;">是</span>
                </el-radio>
                <el-radio value="否" size="large" class="smallOptions"><span style="font-size: 15px;">否</span>
                </el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>水管，气管 连接是否紧固</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <el-radio-group v-model="form7.radio_2">
                <el-radio value="是" size="large" class="smallOptions"><span style="font-size: 15px;">是</span>
                </el-radio>
                <el-radio value="否" size="large" class="smallOptions"><span style="font-size: 15px;">否</span>
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>气路模块和气路管清洗</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <el-radio-group v-model="form7.radio_3">
                <el-radio value="是" size="large" class="smallOptions"><span style="font-size: 15px;">是</span>
                </el-radio>
                <el-radio value="否" size="large" class="smallOptions"><span style="font-size: 15px;">否</span>
                </el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>加热带是否与机壳无接触</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <el-radio-group v-model="form7.radio_4">
                <el-radio value="是" size="large" class="smallOptions"><span style="font-size: 15px;">是</span>
                </el-radio>
                <el-radio value="否" size="large" class="smallOptions"><span style="font-size: 15px;">否</span>
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>螺丝，接头是否画标识</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <el-radio-group v-model="form7.radio_5">
                <el-radio value="是" size="large" class="smallOptions"><span style="font-size: 15px;">是</span>
                </el-radio>
                <el-radio value="否" size="large" class="smallOptions"><span style="font-size: 15px;">否</span>
                </el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>加热带魔术贴粘贴完好</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <el-radio-group v-model="form7.radio_6">
                <el-radio value="是" size="large" class="smallOptions"><span style="font-size: 15px;">是</span>
                </el-radio>
                <el-radio value="否" size="large" class="smallOptions"><span style="font-size: 15px;">否</span>
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <!--吊装人员和日期-->
          <el-row>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>吊装人员</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>{{form7.input_Hoisting_personnel}}</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>日期</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content ep-bg-purple"/>
              <span>{{form7.input_Date}}</span>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import {defineProps, reactive, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const form7 = reactive({
  input_Case:'',/*Case*/
  radio_1:'',/*上泵是否与下泵连接牢固*/
  radio_2:'',/*水管，气管 连接是否紧固*/
  radio_3:'',/*气路模块和气路管清洗*/
  radio_4:'',/*加热带是否与机壳无接触*/
  radio_5:'',/*螺丝，接头是否画标识*/
  radio_6:'',/*加热带魔术贴粘贴完好*/

  input_Hoisting_personnel:'',/*吊装人员*/
  input_Date:'',/*日期*/
})
const props = defineProps({
  input_Case: {
    type: String,
    default: ''
  }
})
watch(() => props.input_Case, (newValue) => {
  axios.get('http://192.168.110.84:8081/part7/value/' + newValue)
      .then(response => {
        // 处理响应
        const data = response.data.data;
        if (response.data.code === 1) {
          if(data !== null){
          // 遍历data对象并更新form
          Object.keys(data).forEach(key => {
            form7[key] = data[key];
          });}else {
            resetForm();
          }
        } else {
          ElMessage.error(response.data.message)
        }
      });
})
function resetForm() {
  form7.input_Case = ''; /* Case */
  form7.radio_1 = ''; /* 上泵是否与下泵连接牢固 */
  form7.radio_2 = ''; /* 水管，气管 连接是否紧固 */
  form7.radio_3 = ''; /* 气路模块和气路管清洗 */
  form7.radio_4 = ''; /* 加热带是否与机壳无接触 */
  form7.radio_5 = ''; /* 螺丝，接头是否画标识 */
  form7.radio_6 = ''; /* 加热带魔术贴粘贴完好 */

  form7.input_Hoisting_personnel = ''; /* 吊装人员 */
  form7.input_Date = ''; /* 日期 */
}
</script>

<style scoped>
.el-col {
  border: black 1px solid;
}

.text_is_vertical {
  writing-mode: vertical-lr; /* 从上到下竖直排列文字 */
  text-orientation: mixed; /* 保持字符的原始方向 */
}

.fontSize {
  font-size: 20px;
}

.smallOptions {
  height: 20px;
}

.text_is_on_the_left {
  text-align: left;
}

.the_font_is_bold {
  font-weight: bold;
}
.report-header {
  text-align: center;
}
.title-container {
  display: inline-block;
  text-align: center;
}
</style>